import React, { useEffect } from 'react';
import { Text, TouchableHighlight } from 'react-native';
import { Badge, Flex, Tabs } from '@ant-design/react-native';
import { LoadingContainer, Container } from '@/rcomponents/Container';
import FlexTextField from '@/rcomponents/flexTextField';
import { IconX } from '@/rcomponents/iconx';
import UserStore from '@/stores/userStore';
import Card from '../components/responsiveCard';

// 待办列表页
const BacklogKind = [
  {
    key: 'edit',
    title: '我发起的',
  },
  {
    key: 'audit',
    title: '待我审批的',
  },
];

export default function BacklogListPage({
  backlogList,
  onBackLogView,
  getBacklogs,
}) {
  const userStore = UserStore.useStore();
  useEffect(() => {
    handleLoadBacklogs();
  }, []);
  const handleLoadBacklogs = () => {
    getBacklogs(userStore.user.LoginName);
  };
  const renderTab = (tab) => {
    return (
      <LoadingContainer
        onRefresh={handleLoadBacklogs}
        loading={getBacklogs.loading}
        data={tab.data}
        renderItem={({ item }) => (
          <TouchableHighlight
            underlayColor="#CCC"
            activeOpacity={0.5}
            onPress={() => onBackLogView(tab.key, item)}
          >
            <Card>
              <Card.Header
                title={item.workNo}
                extra={<IconX origin="ant" name="right" />}
              />
              <Card.Body>
                <Flex>
                  <FlexTextField label="飞机号" fieldValue={item.acno} />
                  <FlexTextField label="状态" fieldValue={item.apvStatusDes} />
                </Flex>
                <Flex>
                  <FlexTextField label="编写者" fieldValue={item.submitter} />
                  <FlexTextField
                    label="编写日期"
                    fieldValue={item.submitDate}
                  />
                </Flex>
                <Flex>
                  <FlexTextField label="故障描述" fieldValue={item.faultdesc} />
                </Flex>
              </Card.Body>
            </Card>
          </TouchableHighlight>
        )}
      />
    );
  };
  return (
    <Tabs
      tabs={BacklogKind.map((lbl, index) => ({
        key: lbl.key,
        data: backlogList[index] || [],
        title: (
          <Badge text={(backlogList[index] || []).length} key={lbl.title}>
            <Text>{lbl.title}</Text>
          </Badge>
        ),
      }))}
    >
      {renderTab}
    </Tabs>
  );
}
